<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="utf-8">
    <title>数据库文档生成工具</title>
    <meta name="keywords" content="dbtool,数据文档导出工具,mysql文档导出工具,数据库文档生成工具，程三发，技术宅"/>
    <meta name="description" content="dbtool-数据库文档生成工具,通过对数据库连接信息配置可以直接生成数据库的结构文档。
			  其内容包括：表名、表注释、字段、类型、长度、字段描述、索引、组合索引等。
			  通过生成的文档可以快速了解数据库的结构。"/>
    <link rel="stylesheet" th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/css/common.css'}"/>
    <link rel="stylesheet" th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/css/export.css'}"/>
</head>

<body>
<div class="container" id="app">
    <div class="h1">数据库导出文档</div>
    <div class="content_box">
        <form οnsubmit="return false" id="default_form">
            <ul>
                <li>
                    <span class="li_check">
						 <input type="checkbox" v-on:click="checkAll"/>
						 <span class="name">表名称</span>
					   </span>
                    <span class="describe">表注释</span>
                </li>
                <li v-for="table in tables">
					  <span class="li_check">
						 <input type="checkbox" v-model="checkData" :value="table.tableName" class="checkItem"/>
						 <span class="name" :title="table.tableName">{{interceptStr(table.tableName)}}</span>
					   </span>
                    <span class="describe" :title="table.tableComment">{{interceptStr(table.tableComment)}}</span>
                </li>

            </ul>
            <div class="button_box">
                <button v-on:click="downloadDoc">导出word</button>
                <button class="warn_btn" v-on:click="returnIndex">返回</button>
            </div>
        </form>
    </div>

    <!--隐藏表单-->
    <form action="/downloadDoc" method="post" id="downloadDoc">
        <div style="display: none">
            <input type="text" class="form-control" name="tableNames" id="tableNames">
            <input type="text" class="form-control" name="ip" v-model="bean.ip">
            <input type="text" class="form-control" name="port" v-model="bean.port">
            <input type="text" class="form-control" name="user" v-model="bean.user">
            <input type="text" class="form-control" name="pwd" v-model="bean.pwd">
            <input type="text" class="form-control" name="database" v-model="bean.database">
            <input type="text" class="form-control" name="databaseName" v-model="bean.databaseName">
        </div>
    </form>
</div>
</body>
<script type="text/javascript" th:src="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/js/jquery-3.2.1.min.js'}"></script>
<script type="text/javascript" th:src="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/js/vue.js'}"></script>
<script type="text/javascript" th:src="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/js/modal_dialog.js'}"></script>
<script type="text/javascript" th:src="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/js/common.js'}"></script>

<script th:inline="javascript">

    //读取model中的值
    const model_bean = [[${bean}]];

    //vue
    const app = new Vue({
        el: "#app",
        data: {
            tables: [],
            checkData: [],
            bean: {
                ip: "",
                port: "",
                user: "",
                pwd: "",
                database: "",
                databaseName: ""
            }
        },
        created: function () {
            this.bean = model_bean;
            this.initTable();
        },
        methods: {
            initTable: function () {
                this.tables = asyncGet("selectByTableName", this.bean);
            },
            //全选
            checkAll: function (event) { // 点击全选事件函数
                const checkValue = $('.checkItem'); // 获取所有checkbox项
                if (event.target.checked) { // 判定全选checkbox的勾选状态
                    for (let i = 0; i < checkValue.length; i++) {
                        if (!checkValue[i].checked) { // 将未勾选的checkbox选项push到绑定数组中
                            this.checkData.push(checkValue[i].value);
                        }
                    }
                } else { // 如果是去掉全选则清空checkbox选项绑定数组
                    this.checkData = [];
                }
            },
            //下载文档
            downloadDoc: function () {
                const tableNames = this.checkData;
                if (tableNames.length < 1) {
                    showAlert('info', '请选择至少一张表！');
                    return;
                }
                $("#tableNames").val(tableNames)
                $('#downloadDoc').submit();
            },
            //截取过长的字符串
            interceptStr: function (value) {
                if (value && value.length > 25) {
                    return value.substring(0, 25) + "...";
                }
                return value;
            },
            //返回首页
            returnIndex: function () {
                location.href = "/";
            }
        }
    })

    //禁止表单提交
    const default_form = document.getElementsByTagName('form')[0];
    default_form.addEventListener('submit', function (e) {
        e.preventDefault();
    });

    //弹框
    function showAlert(icon, msg) {
        $modal({
            type: 'message', //弹框类型  'alert' or  'confirm' or 'message'    message提示(开启之前如果之前含有弹框则清除)
            icon: icon, // 提示图标显示 'info' or 'success' or 'warning' or 'error'  or 'question'
            timeout: 2000, // 单位 ms  显示多少毫秒后关闭弹框 （ confirm 下无效 | 不传默认为 2000ms | 最短显示时间为500ms）
            content: msg, // 提示文字
            top: 100, //距离顶部距离 单位px
            transition: 300, //过渡动画 默认 200  单位ms
            closable: false, // 是否显示可关闭按钮  默认为 false
        })
    }
</script>